<template>
	<view class="content">
		<view class="header">
			<text class="title">雨初成长记录</text>
			<uni-icons @click="dkRq" type="calendar" size="30" class="calendar-icon"></uni-icons>
		</view>
		<uni-calendar ref="calendar" :insert="false" @confirm="confirm" />
		<!-- <image class="logo" src="@/static/logo.png"></image> -->
		<div>{{ dqRq }}</div>
		<div v-if="sfYz == true">
			<div>本日暂未进行成长记录</div>
		</div>

		<div v-if="sfYz == false">本日有数据</div>
	</view>
</template>

<script>
	import {
		listCzjl,
		getCzjl,
		delCzjl,
		addCzjl,
		updateCzjl,
		selectCzjlByRq
	} from "@/api/zyc/czjl";
	export default {
		data() {
			return {
				sfYz: false, // false代表有数据, true代表本日无数据
				dqRq: this.getCurrentDate(), //当前查询的日期
			}
		},
		//下拉刷新触发方法(和onLoad同级)
		onPullDownRefresh() {
			this.getList() //获取数据
		},
		onLoad: function() {

		},
		created() {
			selectCzjlByRq(this.dqRq).then(res => {
				console.log(res, '的撒阿萨德')
				if (res.msg == 'null') {
					this.sfYz = true
				} else {
					this.sfYz = false
				}
			})
		},
		methods: {
			confirm(e) {
				this.dqRq = e.fulldate
				console.log(e.fulldate);
				selectCzjlByRq(e.fulldate).then(res => {
					if (res.msg == 'null') {
						this.sfYz = true
					} else {
						this.sfYz = false
					}
				})
			},
			dkRq() {
				console.log(12111)
				this.$refs.calendar.open();
			},
			getCurrentDate() {
				const today = new Date();
				const year = today.getFullYear();
				let month = today.getMonth() + 1; // 注意月份是从 0 开始的
				let day = today.getDate();

				month = month < 10 ? '0' + month : month;
				day = day < 10 ? '0' + day : day;

				return `${year}-${month}-${day}`;
			},
			getList() {
				selectCzjlByRq(this.dqRq).then(res => {
					if (res.msg == 'null') {
						this.sfYz = true
					} else {
						this.sfYz = false
					}
					uni.stopPullDownRefresh() //结束下拉刷新
				})
			},

		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		/* 使 .header 居中 */
		justify-content: center;
		position: relative;
		/* 设置相对定位，以便子元素可以基于此进行绝对定位 */
		width: 100%;
		/* 确保占满整个宽度 */
	}

	.header {
		width: 100%;
		/* 占满整个父容器 */
		text-align: center;
		/* 让文本居中 */
		position: relative;
		/* 为图标设置绝对定位做准备 */
		margin-top: 20rpx;
		/* 向下移动整个 header */
	}

	.title {
		color: black;
		font-size: 15px;
		font-weight: 500;
		display: inline-block;
		/* 确保它是块级元素以应用 margin */
	}

	.calendar-icon {
		position: absolute;
		/* 绝对定位，使其脱离文档流 */
		right: 20rpx;
		/* 距离右边的距离 */
		top: 50%;
		/* 垂直居中 */
		transform: translateY(-50%);
		/* 精确垂直居中 */
	}

	/* 如果你想要更精细地控制图标的位置，可以通过调整下面的 top 或者 margin-top */
	.calendar-icon.down {
		top: calc(50% + 10rpx);
		/* 向下移动图标 */
	}
</style>